<template>
    <div id="app">
        <img src="./assets/logo.png">
        <div>
            <p>
                测试自动更新
            </p>
            <!-- <el-button>el-button</el-button> -->
            <el-dialog
                title="咖啡零售端正在更新...."
                :show-close="false"
                :close-on-click-modal="false"
                :visible.sync="dialogVisible"
                width="30%">
                <update-progess @isShowUpdate="isShowUpdate" />
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts">
import UpdateProgess from "./components/updateProgess.vue";
import { Component, Vue } from "vue-property-decorator";
const { ipcRenderer } = require("electron");

@Component({
    components: {
        UpdateProgess
    }
})
export default class Home extends Vue {
    // 更新modal
    private dialogVisible: boolean = false;

    // 生命周期
    private created() {
        ipcRenderer.on(
            "message",
            (event: any, { message, data }: { message: any; data: any }) => {
                // 进度条
                if (message === "update-not-available" || message === "checking-for-update") {
                    this.dialogVisible = false;
                } else {
                    this.dialogVisible = true;
                }
            }
        );
    }

    //生命周期
    private mounted() {
        ipcRenderer.send("update");
    }

    // 监控子组件传过来的值
    private isShowUpdate(data: boolean) {
        this.dialogVisible = data;
    }
}
</script>

<style>
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
